<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-carousel :interval="3000" >
          <el-carousel-item v-for="item in images" :key="item">
            <img class="car_img" :src="item.url" alt="">
            <h3>{{item.name}}</h3>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-tabs type="border-card">
          <el-tab-pane>
            <template #label>
              <span><i class="el-icon-money"></i> 个人账本</span>
            </template>
            <UserTable v-show="isTable"></UserTable>
          </el-tab-pane>
          <el-tab-pane>
            <template #label>
              <span><i class="el-icon-money"></i> 个人日记</span>
            </template>
            <diary v-show="isTable"></diary>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <!--  <Click></Click> 下拉框-->
  </div>
</template>

<script>

// import Click from './components/Click.vue'
import UserTable from './components/userTable'
import diary from './components/diary'
export default {
  name: 'App',
  components: {

    diary,
    UserTable
  },
  data() {
    return {
      isTable: true,
      // images
      // images:['img/1.webp','img/2.webp','img/3.webp'],
      images:[
        {
          url:'img/1.webp',
          name:'如果你的身旁没有光点',
        },{
          url:'img/2.webp',
          name:'我是否可以做你的光',
        } ,{
          url:'img/3.webp',
          name:'陌生人要加油',
        }
      ],
      //images1:['如果你的身旁没有光点','我是否可以做你的光','陌生人要加油','总会好起来的 即便不是在现在'],
    }
  },
  methods: {
    show: function () {
      if (this.isTable) {
        this.isTable = false;
      } else {
        this.isTable = true;
      }


    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
  .car_img{
    width: 100%;
    height: 100%;
  }
</style>
